<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue单页面应用路由控制① | 小小错题本</title>
    <meta name="description" content="

这种方法有个缺陷：需要服务端生成保存登录角色路由表返回前台，前台做对应处理，后台工作量提升

// 用户登录后服务器端返回相关权限的路由表格式(服务器端返回)：
[
  {
    path: &#39;list&#39;,
    name: &#39;home&#39;,
    component: &#39;List&#39;
  }
];

// 异步获取路由
api.getRouters().then((rout ...">
    <meta name="generator" content="VuePress 1.3.0">
    
    
    <link rel="preload" href="/wrong_question_static_page/assets/css/0.styles.f30cb765.css" as="style"><link rel="preload" href="/wrong_question_static_page/assets/js/app.9022c753.js" as="script"><link rel="preload" href="/wrong_question_static_page/assets/js/4.8c1e4aa5.js" as="script"><link rel="preload" href="/wrong_question_static_page/assets/js/5.33f70f09.js" as="script"><link rel="preload" href="/wrong_question_static_page/assets/js/21.5ae0ad82.js" as="script"><link rel="prefetch" href="/wrong_question_static_page/assets/js/1.ec18c3a1.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/10.697d33d5.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/11.488795fa.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/12.12a9963e.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/13.9d026eb1.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/14.c44f0e4a.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/15.a258b8bb.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/16.92328039.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/17.c4f16e4e.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/18.4dfa396f.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/19.edba2346.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/20.082608a3.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/22.89457782.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/23.53bf9e28.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/24.ae06dfc6.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/25.1d7d04a4.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/6.af07a62f.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/7.2c342931.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/8.2545b8d2.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/9.0eaa1c27.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/vuejs-paginate.c4011005.js">
    <link rel="stylesheet" href="/wrong_question_static_page/assets/css/0.styles.f30cb765.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><section id="header-wrapper"><header id="header"><div class="header-wrapper"><div class="title"><a href="/wrong_question_static_page/" class="nav-link home-link">小小错题本 </a></div> <div class="header-right-wrap"><ul class="nav"><li class="nav-item"><a href="/wrong_question_static_page/tag/" class="nav-link">分类</a></li></ul> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></div></header></section> <div id="mobile-header"><div class="mobile-header-bar"><div class="mobile-header-title"><a href="/wrong_question_static_page/" class="nav-link mobile-home-link">小小错题本 </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div> <div class="mobile-menu-wrapper"><hr class="menu-divider"> <ul class="mobile-nav"><li class="mobile-nav-item"><a href="/wrong_question_static_page/tag/" class="nav-link">分类</a></li> <li class="mobile-nav-item"><!----></li></ul></div></div></div> <div class="content-wrapper"><div id="vuepress-theme-blog__post-layout"><article itemscope="itemscope" itemtype="https://schema.org/BlogPosting" class="vuepress-blog-theme-content"><header><h1 itemprop="name headline" class="post-title">
        Vue单页面应用路由控制①
      </h1> <div class="post-meta"><!----> <div class="post-meta-date"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> <time pubdate itemprop="datePublished" datetime="2020-02-22T00:00:00.000Z">
      Sat Feb 22 2020
    </time></div> <ul itemprop="keywords" class="post-meta-tags"><li class="post-tag" data-v-2ac33c20><a href="/wrong_question_static_page/tag/vue" data-v-2ac33c20> vue </a></li><li class="post-tag" data-v-2ac33c20><a href="/wrong_question_static_page/tag/vue路由" data-v-2ac33c20> vue路由 </a></li></ul></div></header> <div itemprop="articleBody" class="content__default"><h4 id="_1-服务器返回对应登录角色的路由映射表给前台"><a href="#_1-服务器返回对应登录角色的路由映射表给前台" class="header-anchor">#</a> 1.服务器返回对应登录角色的路由映射表给前台</h4> <ul><li>这种方法有个缺陷：需要服务端生成保存登录角色路由表返回前台，前台做对应处理，后台工作量提升</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 用户登录后服务器端返回相关权限的路由表格式(服务器端返回)：</span>
<span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'list'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> <span class="token string">'List'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// 异步获取路由</span>
api<span class="token punctuation">.</span><span class="token function">getRouters</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">routes</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> routeConfig <span class="token operator">=</span> routes<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">route</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">mapComponent</span><span class="token punctuation">(</span>route<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 动态增加路由</span>
  router<span class="token punctuation">.</span><span class="token function">addRoutes</span><span class="token punctuation">(</span>routeConfig<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 映射关系</span>
<span class="token keyword">const</span> compMap <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">List</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./views/List.vue'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 递归替换</span>
<span class="token keyword">function</span> <span class="token function">mapComponent</span><span class="token punctuation">(</span><span class="token parameter">route</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  route<span class="token punctuation">.</span>component <span class="token operator">=</span> compMap<span class="token punctuation">[</span>route<span class="token punctuation">.</span>component<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    route<span class="token punctuation">.</span>children <span class="token operator">=</span> route<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">child</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">mapComponent</span><span class="token punctuation">(</span>child<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_2-服务器返回所有角色的路由映射表给前台"><a href="#_2-服务器返回所有角色的路由映射表给前台" class="header-anchor">#</a> 2.服务器返回所有角色的路由映射表给前台</h4> <ul><li>我这边的思路是，前台代码保留一份完整的路由信息表，服务器返回带有 name 和 roles 的对应数据即可，前端负责将数据合并，然后加载“动态路由”。</li></ul> <p>代码演示基础框架：<a href="https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html" target="_blank" rel="noopener noreferrer">vue-element-admin<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h5 id="_2-1-后台返回数据-mock-role-routes-js"><a href="#_2-1-后台返回数据-mock-role-routes-js" class="header-anchor">#</a> 2.1 后台返回数据 mock\role\routes.js</h5> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> asyncRoutes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/managener'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'Managener'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'各平台管理'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'example'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token string">'editor'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'funManagener'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'FunManagener'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'回收系统功能管理'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'tree'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'acManagener'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'AcManagener'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'回收系统账套管理'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'table'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token string">'editor'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'screenModule'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'ScreenModule'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'可视化大屏模板管理'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'table'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token string">'editor'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'screenAccount'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'ScreenAccount'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'可视化大屏账号管理'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'table'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token string">'editor'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'acMangentnewPlate'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'AcMangentnewPlate'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">' 新增平台'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token string">'editor'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'acMangentdetail/:id'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'AcMangentdetail'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">' 详情'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'acMangentedit/:id'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'AcMangentedit'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">' 编辑'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token string">'editor'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'acMangentepeizhi/:id'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'AcMangentepeizhi'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">' 配置功能 '</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/system'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'System'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'系统管理'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'example'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'rolesManagener'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'RolesManagener'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'用户权限管理'</span><span class="token punctuation">,</span> icon<span class="token operator">:</span> <span class="token string">'tree'</span><span class="token punctuation">,</span> roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'userManagener'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'UserManagener'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'用户管理'</span><span class="token punctuation">,</span> icon<span class="token operator">:</span> <span class="token string">'table'</span><span class="token punctuation">,</span> roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 404 page must be placed at the end !!!</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span> redirect<span class="token operator">:</span> <span class="token string">'/404'</span><span class="token punctuation">,</span> hidden<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_2-2-前台数据-src-router-index-js"><a href="#_2-2-前台数据-src-router-index-js" class="header-anchor">#</a> 2.2 前台数据 src\router\index.js</h5> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> asyncRoutes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/managener'</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> Layout<span class="token punctuation">,</span>
    redirect<span class="token operator">:</span> <span class="token string">'/managener/acManagener'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'Managener'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'各平台管理'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'example'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'funManagener'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'FunManagener'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/managener/funManagener/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'回收系统功能管理'</span><span class="token punctuation">,</span> icon<span class="token operator">:</span> <span class="token string">'tree'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'acManagener'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'AcManagener'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/managener/acManagener/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'回收系统账套管理'</span><span class="token punctuation">,</span> icon<span class="token operator">:</span> <span class="token string">'table'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'screenModule'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'ScreenModule'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/managener/screenModule/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'可视化大屏模板管理'</span><span class="token punctuation">,</span> icon<span class="token operator">:</span> <span class="token string">'table'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'screenAccount'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'ScreenAccount'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/managener/screenAccount/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'可视化大屏账号管理'</span><span class="token punctuation">,</span> icon<span class="token operator">:</span> <span class="token string">'table'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'acMangentnewPlate'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'AcMangentnewPlate'</span><span class="token punctuation">,</span>
        hidden<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/managener/acManagener/newPlate/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">' 新增平台'</span><span class="token punctuation">,</span>
          icon<span class="token operator">:</span> <span class="token string">'Rest'</span><span class="token punctuation">,</span>
          roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'acMangentdetail/:id'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'AcMangentdetail'</span><span class="token punctuation">,</span>
        hidden<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/managener/acManagener/acdetail/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">' 详情'</span><span class="token punctuation">,</span>
          icon<span class="token operator">:</span> <span class="token string">'Rest'</span><span class="token punctuation">,</span>
          roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          noCache<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          activeMenu<span class="token operator">:</span> <span class="token string">'/managener/acManagener'</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'acMangentedit/:id'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'AcMangentedit'</span><span class="token punctuation">,</span>
        hidden<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
          <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/managener/acManagener/editplate/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">' 编辑'</span><span class="token punctuation">,</span>
          icon<span class="token operator">:</span> <span class="token string">'Rest'</span><span class="token punctuation">,</span>
          roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          noCache<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          activeMenu<span class="token operator">:</span> <span class="token string">'/managener/acManagener'</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'acMangentepeizhi/:id'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'AcMangentepeizhi'</span><span class="token punctuation">,</span>
        hidden<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/managener/acManagener/peizhi/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">' 配置功能 '</span><span class="token punctuation">,</span>
          icon<span class="token operator">:</span> <span class="token string">'Rest'</span><span class="token punctuation">,</span>
          roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          noCache<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          activeMenu<span class="token operator">:</span> <span class="token string">'/managener/acManagener'</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/system'</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> Layout<span class="token punctuation">,</span>
    redirect<span class="token operator">:</span> <span class="token string">'/system/rolesManagener'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'System'</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'系统管理'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'example'</span><span class="token punctuation">,</span>
      roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'rolesManagener'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'RolesManagener'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/system/rolesManagener/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'用户权限管理'</span><span class="token punctuation">,</span> icon<span class="token operator">:</span> <span class="token string">'tree'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'userManagener'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'UserManagener'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/system/userManagener/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'用户管理'</span><span class="token punctuation">,</span> icon<span class="token operator">:</span> <span class="token string">'table'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 404 page must be placed at the end !!!</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span> redirect<span class="token operator">:</span> <span class="token string">'/404'</span><span class="token punctuation">,</span> hidden<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_2-3-前台处理代码-src-store-modules-permission-js"><a href="#_2-3-前台处理代码-src-store-modules-permission-js" class="header-anchor">#</a> 2.3 前台处理代码 src\store\modules\permission.js</h5> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> asyncRoutes<span class="token punctuation">,</span> constantRoutes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/router'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getAsyncRoutes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../api/role'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> deepClone <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../utils/index'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> clientRoutes <span class="token operator">=</span> <span class="token function">deepClone</span><span class="token punctuation">(</span>asyncRoutes<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/**
 * Use meta.role to determine if the current user has permission
 * @param roles
 * @param route
 */</span>
<span class="token keyword">function</span> <span class="token function">hasPermission</span><span class="token punctuation">(</span><span class="token parameter">roles<span class="token punctuation">,</span> route</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>meta <span class="token operator">&amp;&amp;</span> route<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>roles<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> roles<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">role</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> route<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>roles<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>role<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 *
 * @param {arr} clientAsyncRoutes 前端保存动态路由
 * @param {arr} serverRouter 后端保存动态路由
 */</span>
<span class="token keyword">function</span> <span class="token function">makePermissionRouters</span><span class="token punctuation">(</span><span class="token parameter">serverRouter<span class="token punctuation">,</span> clientAsyncRoutes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  clientAsyncRoutes<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">ele</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>ele<span class="token punctuation">.</span>name <span class="token operator">||</span> <span class="token punctuation">(</span><span class="token operator">!</span>ele<span class="token punctuation">.</span>meta <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>ele<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>roles<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> roles_obj<span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> serverRouter<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> element <span class="token operator">=</span> serverRouter<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>ele<span class="token punctuation">.</span>name <span class="token operator">===</span> element<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        roles_obj <span class="token operator">=</span> element<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    ele<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>roles <span class="token operator">=</span> roles_obj<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>roles<span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>ele<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">makePermissionRouters</span><span class="token punctuation">(</span>serverRouter<span class="token punctuation">,</span> ele<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> clientAsyncRoutes<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * Filter asynchronous routing tables by recursion
 * @param routes asyncRoutes
 * @param roles
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">filterAsyncRoutes</span><span class="token punctuation">(</span><span class="token parameter">routes<span class="token punctuation">,</span> roles</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  routes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">route</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> tmp <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>route <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">hasPermission</span><span class="token punctuation">(</span>roles<span class="token punctuation">,</span> tmp<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>tmp<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        tmp<span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token function">filterAsyncRoutes</span><span class="token punctuation">(</span>tmp<span class="token punctuation">.</span>children<span class="token punctuation">,</span> roles<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>tmp<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> res<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span>
  routes<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  addRoutes<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">SET_ROUTES</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> routes</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    state<span class="token punctuation">.</span>addRoutes <span class="token operator">=</span> routes<span class="token punctuation">;</span>
    state<span class="token punctuation">.</span>routes <span class="token operator">=</span> constantRoutes<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>routes<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">generateRoutes</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">,</span> roles</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> PermissionRouters <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getAsyncRoutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> data <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
      PermissionRouters <span class="token operator">=</span> <span class="token function">makePermissionRouters</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> clientRoutes<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// console.log('api:' + PermissionRouters)</span>
      <span class="token keyword">return</span> PermissionRouters<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>PermissionRouters<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> accessedRoutes<span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>roles<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>PermissionRouters<span class="token punctuation">)</span><span class="token punctuation">;</span>

        accessedRoutes <span class="token operator">=</span> PermissionRouters <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        accessedRoutes <span class="token operator">=</span> <span class="token function">filterAsyncRoutes</span><span class="token punctuation">(</span>PermissionRouters<span class="token punctuation">,</span> roles<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>accessedRoutes<span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'SET_ROUTES'</span><span class="token punctuation">,</span> accessedRoutes<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token function">resolve</span><span class="token punctuation">(</span>accessedRoutes<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  namespaced<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  state<span class="token punctuation">,</span>
  mutations<span class="token punctuation">,</span>
  actions
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer><!----> <hr> <!----></footer></article> <!----></div></div> <footer class="footer" data-v-06e1b74b><div class="footer-left-wrap" data-v-06e1b74b><ul class="contact" data-v-06e1b74b></ul></div> <div class="footer-right-wrap" data-v-06e1b74b><ul class="copyright" data-v-06e1b74b></ul></div></footer></div><div class="global-ui"><!----></div></div>
    <script src="/wrong_question_static_page/assets/js/app.9022c753.js" defer></script><script src="/wrong_question_static_page/assets/js/4.8c1e4aa5.js" defer></script><script src="/wrong_question_static_page/assets/js/5.33f70f09.js" defer></script><script src="/wrong_question_static_page/assets/js/21.5ae0ad82.js" defer></script>
  </body>
</html>
